/* 
 * AI备忘录应用 - CSS样式表（带详细注释）
 * 核心目标：实现页面美观、响应式布局，区分功能模块（表单/任务列表/AI内容），提升用户体验
 */

/* 1. 全局样式重置 - 消除浏览器默认差异，统一基础样式 */
* {
    margin: 0;
    padding: 0;
    /* 
     * box-sizing: border-box; 核心作用：让元素的padding和border不占用宽度
     * 例如：一个width:100%的输入框，加padding后不会超出父容器（避免布局错乱）
     */
    box-sizing: border-box;
    /* 
     * 字体栈：优先使用"微软雅黑"（适合中文显示），无则用Arial（英文 fallback），最后用系统默认sans-serif
     * 确保不同系统/浏览器下字体显示一致，避免中文乱码或字体模糊
     */
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

/* 2. 页面主体样式 - 控制整体背景和文字基础风格 */
body {
    /* 浅灰色背景：避免纯白刺眼，提升长时间使用舒适度 */
    background-color: #f5f7fa;
    /* 深灰色文字：比纯黑(#000)柔和，减轻视觉疲劳，同时保证可读性 */
    color: #333;
}

/* 3. 容器样式 - 控制页面内容居中，限制最大宽度（适配不同屏幕） */
.container {
    /* 最大宽度1000px：在大屏设备（如电脑）上内容不致过宽，易读性更好 */
    max-width: 1000px;
    /* margin: 30px auto; 上下留30px间距，左右自动（实现水平居中） */
    margin: 30px auto;
    /* 左右内边距20px：在小屏设备（如平板）上，内容不贴边，有呼吸感 */
    padding: 0 20px;
}

/* 4. 主标题样式 - 突出页面主题，吸引注意力 */
h1 {
    /* 深蓝色：与按钮颜色呼应，形成视觉统一，同时区别于普通文字 */
    color: #326191;
    /* 文字居中：主标题通常居中显示，符合用户阅读习惯 */
    text-align: center;
    /* 底部间距40px：与下方表单分隔，避免拥挤 */
    margin-bottom: 40px;
    /* 字体大小38px：足够大，确保用户一眼看到页面主题 */
    font-size: 38px;
}

/* 5. 子标题样式（表单/列表标题） - 区分功能模块 */
h3 {
    /* 深灰色：比主标题浅，既突出模块，又不抢主标题风头 */
    color: #2c3e50;
    /* 底部间距15px：与下方内容分隔，保持模块内间距一致 */
    margin-bottom: 15px;
    /* 字体大小18px：适中，清晰区分模块，不冗余 */
    font-size: 18px;
}

/* 6. 任务添加表单样式 - 独立模块，突出交互区域 */
.add-task {
    /* 白色背景：与页面浅灰背景区分，让表单成为视觉焦点 */
    background-color: white;
    /* 内边距25px：表单内容与边框有间距，不拥挤 */
    padding: 25px;
    /* 圆角8px：弱化直角，提升现代感，避免尖锐视觉冲击 */
    border-radius: 8px;
    /* 轻微阴影：增加层次感，让表单"浮"在页面上，不扁平 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* 底部间距30px：与下方任务列表分隔，明确功能分区 */
    margin-bottom: 30px;
}

/* 6.1 表单项容器 - 控制每个输入区域的间距 */
.form-item {
    /* 底部间距20px：表单项之间留空，避免内容堆叠，提升可读性 */
    margin-bottom: 20px;
}

/* 6.2 表单项标签 - 明确输入内容含义 */
.form-item label {
    /* display: block; 让标签独占一行，避免与输入框并排（手机端易错乱） */
    display: block;
    /* 底部间距8px：标签与输入框分隔，清晰对应 */
    margin-bottom: 8px;
    /* 中灰色：区分标签和输入内容，不抢焦点 */
    color: #666;
    /* font-weight: 500; 标签加粗，让用户快速识别输入项 */
    font-weight: 500;
}

/* 6.3 输入框/文本域样式 - 统一交互控件外观 */
.form-item input, 
.form-item textarea {
    /* 宽度100%：适配父容器（表单），响应式布局 */
    width: 100%;
    /* 内边距10px 12px：输入内容与边框有间距，不贴边 */
    padding: 10px 12px;
    /* 浅灰色边框：默认状态不突出，聚焦时变化 */
    border: 1px solid #ddd;
    /* 圆角4px：与表单圆角呼应，风格统一 */
    border-radius: 4px;
    /* 字体大小14px：输入文字清晰，不冗余 */
    font-size: 14px;
    /* transition: border 0.3s; 边框颜色变化时的过渡动画（0.3秒），提升交互感 */
    transition: border 0.3s;
}

/* 6.4 输入框/文本域聚焦样式 - 反馈用户交互状态 */
.form-item input:focus, 
.form-item textarea:focus {
    /* outline: none; 清除浏览器默认聚焦边框（通常很粗，不美观） */
    outline: none;
    /* 蓝色边框：聚焦时突出输入框，明确当前交互对象 */
    border-color: #3498db;
}

/* 6.5 文本域特殊样式 - 限制拉伸方向 */
.form-item textarea {
    /* resize: vertical; 只允许垂直拉伸，避免用户横向拉伸导致布局错乱 */
    resize: vertical;
}

/* 7. 按钮样式 - 突出可交互元素，引导用户操作 */
button {
    /* 蓝色背景：与主标题颜色呼应，同时蓝色代表"确认/提交"，符合用户认知 */
    background-color: #3498db;
    /* 白色文字：与蓝色背景对比强烈，按钮文字清晰可见 */
    color: white;
    /* 无边框：弱化边框，让按钮更简洁 */
    border: none;
    /* 内边距12px 24px：按钮大小适中，点击区域足够（手机端易点击） */
    padding: 12px 24px;
    /* 圆角4px：与表单/输入框圆角呼应，风格统一 */
    border-radius: 4px;
    /* 字体大小14px：按钮文字清晰，不冗余 */
    font-size: 14px;
    /* cursor: pointer; 鼠标悬停时显示"手"形，提示用户可点击 */
    cursor: pointer;
    /* 背景色过渡动画：hover时颜色变化更平滑，提升交互感 */
    transition: background 0.3s;
    /* 注意：原box-shadow写法无效（仅指定颜色，缺少偏移/模糊半径），建议优化为：
       box-shadow: 0 2px 4px rgba(41, 128, 185, 0.3); （增加轻微阴影，提升立体感）
     */
    box-shadow: 0 2px 4px rgba(41, 128, 185, 0.3) ;
}

/* 7.1 按钮 hover 样式 - 反馈用户悬停状态 */
button:hover {
    /* 深蓝色背景：比默认按钮色深，明确用户悬停状态，同时保持视觉统一 */
    background-color: #2980b9;
}

/* 8. 任务列表样式 - 独立模块，展示任务内容 */
.task-list {
    /* 白色背景：与表单一致，区分于页面背景，聚焦任务内容 */
    background-color: white;
    /* 内边距25px：任务内容与边框有间距，不拥挤 */
    padding: 25px;
    /* 圆角8px：与表单风格统一，现代感 */
    border-radius: 8px;
    /* 轻微阴影：增加层次感，避免扁平 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 8.1 单个任务项样式 - 分隔每个任务，清晰展示信息 */
.task-item {
    /* 底部边框：分隔每个任务，避免内容混淆 */
    border-bottom: 1px solid #f0f0f0;
    /* 上下内边距20px：任务内部上下留空，内容不贴边 */
    padding: 20px 0;
    /* 清除列表默认圆点：任务列表不需要默认列表标记 */
    list-style: none;
}

/* 8.2 最后一个任务项 - 去除底部边框，避免多余分隔 */
.task-item:last-child {
    border-bottom: none;
}

/* 8.3 任务头部（标题+状态选择器） - 横向布局，区分核心信息 */
.task-header {
    /* display: flex; 横向排列标题和状态选择器 */
    display: flex;
    /* justify-content: space-between; 标题居左，状态选择器居右，利用空间 */
    justify-content: space-between;
    /* align-items: center; 垂直居中，避免标题和选择器上下错位 */
    align-items: center;
    /* 底部间距15px：与下方任务详情分隔 */
    margin-bottom: 15px;
}

/* 8.4 任务标题 - 突出任务核心内容 */
.task-header h4 {
    /* 深灰色：与子标题颜色一致，清晰展示任务主题 */
    color: #2c3e50;
    /* 字体大小16px：适中，不抢主标题风头，同时清晰可读 */
    font-size: 16px;
}

/* 8.5 任务状态选择器 - 允许用户快速修改任务状态 */
.status-select {
    /* 内边距6px 10px：选择器大小适中，点击区域足够 */
    padding: 6px 10px;
    /* 浅灰色边框：与输入框边框风格一致 */
    border: 1px solid #ddd;
    /* 圆角4px：统一圆角风格 */
    border-radius: 4px;
    /* 字体大小13px：比输入框小，避免抢任务标题焦点 */
    font-size: 13px;
    /* 鼠标"手"形：提示用户可点击选择 */
    cursor: pointer;
    /* 边框过渡动画：聚焦时变化平滑 */
    transition: border 0.3s;
}

/* 8.6 状态选择器聚焦样式 - 反馈交互状态 */
.status-select:focus {
    /* 清除默认聚焦边框 */
    outline: none;
    /* 蓝色边框：与输入框聚焦色一致，统一交互反馈 */
    border-color: #3498db;
}

/* 8.7 任务详情信息 - 展示任务补充内容（详情、时间） */
.task-info {
    /* 底部间距15px：与下方AI内容分隔 */
    margin-bottom: 15px;
    /* 字体大小14px：详情文字适中，不冗余 */
    font-size: 14px;
    /* 中灰色：区分详情和标题，不抢焦点 */
    color: #666;
    /* 行高1.8：增加文字间距，提升可读性（尤其长文本） */
    line-height: 1.8;
}

/* 8.8 任务详情标签（如"详情：""截止时间："） - 区分标签和内容 */
.task-info span {
    /* 浅灰色：比详情文字更浅，明确标签作用，不抢内容焦点 */
    color: #999;
    /* 右侧间距8px：标签与内容分隔，避免拥挤 */
    margin-right: 8px;
}

/* 9. AI生成内容样式 - 区分AI输出和用户任务内容 */
.ai-content {
    /* 浅灰色背景：与任务详情背景区分，明确这是AI生成内容 */
    background-color: #f8f9fa;
    /* 内边距15px：AI内容与边框有间距，不贴边 */
    padding: 15px;
    /* 圆角4px：统一圆角风格 */
    border-radius: 4px;
    /* 字体大小14px：与任务详情一致，保持可读性 */
    font-size: 14px;
    /* 行高1.8：提升长文本可读性（AI内容通常较长） */
    line-height: 1.8;
    /* 深灰色：比任务详情文字深，突出AI内容的参考价值 */
    color: #555;
}

/* 9.1 AI内容标签（如"AI规划：""AI建议："） - 突出AI模块 */
.ai-content span {
    /* 蓝色：与按钮/输入框聚焦色一致，明确这是AI相关内容 */
    color: #3498db;
    /* 字体加粗：突出标签，让用户快速识别AI内容类型 */
    font-weight: 500;
    /* 右侧间距8px：标签与内容分隔 */
    margin-right: 8px;
}

/* 10. AI加载状态样式 - 提示用户AI正在生成规划
 * 修复Microsoft Edge Tools报错：CSS inline styles should not be used
 */
#loading {
    /* 隐藏元素直到需要显示 */
    display: none;
    /* 左侧间距10px：与提交按钮分隔 */
    margin-left: 10px;
    /* 浅灰色：不抢按钮焦点，仅作提示 */
    color: #666;
}

/* 10. 无任务提示样式 - 提升空状态用户体验 */
.empty {
    /* 文字居中：空提示通常居中显示，符合用户视觉习惯 */
    text-align: center;
    /* 上下内边距40px：提示区域足够大，不单调 */
    padding: 40px 0;
    /* 浅灰色：不刺眼，同时明确这是提示文字 */
    color: #999;
    /* 字体大小14px：适中，不冗余 */
    font-size: 14px;
    /* 浅灰色背景：与AI内容背景一致，统一浅色模块风格 */
    background-color: #f8f9fa;
    /* 圆角4px：统一圆角风格 */
    border-radius: 4px;
}